<template>
  <div>
    <h1>句子相关知识点页面</h1>
    <h2>句子内容</h2>
    <el-card class="box-card" shadow="never">
      <div style="font-size: 36px;">{{ sentenceContent }}</div>
    </el-card>
    <h2>相关单词</h2>
    <el-card class="box-card" shadow="never">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(word,index) in words" :key="index">
          <knowledge-item-div-with-icon type="word" :data="word"></knowledge-item-div-with-icon>
        </el-col>
        <el-col :span="6">
          <to-add-item-div type="word"></to-add-item-div>
        </el-col>
      </el-row>
    </el-card>
    <h2>相关语法</h2>
    <el-card class="box-card" shadow="never">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(grammar,index) in grammars" :key="index">
          <knowledge-item-div-with-icon type="grammar" :data="grammar"></knowledge-item-div-with-icon>
        </el-col>
        <el-col :span="6">
          <to-add-item-div type="grammar"></to-add-item-div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import KnowledgeItemDivWithIcon from "@/components/KnowledgeItemDivWithDeleteIcon";
import ToAddItemDiv from "@/components/ToAddItemDiv";
import {findSentenceModifiedVo} from "@/apis/sentence.api";

export default {
  name: "ModifySentenceKnowledge",
  components: {KnowledgeItemDivWithIcon, ToAddItemDiv},
  props: {
    videoNum: String,
    sentenceNum: String
  },
  async mounted() {
    this.updateEditedSentenceId({videoNum: this.videoNum, seq: this.sentenceNum});
    let data = await findSentenceModifiedVo(this.videoNum, this.sentenceNum);
    this.sentenceContent = data.data.content;
    this.words = data.data.wordVos;
    this.grammars = data.data.grammarVos;
  },
  data() {
    return {
      sentenceContent: '',
      words: [],
      grammars: []
    }
  },
  methods: {
    updateEditedSentenceId(payload) {
      this.$store.commit("updateEditedSentenceId", payload);
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  background-color: rgba(211, 211, 211, 0.5);
}
</style>